<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>物业收费管理</title>
    <link rel="stylesheet" href="${ctxPath}/assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="${ctxPath}/assets/module/admin.css">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 表格工具栏 -->
            <form class="layui-form toolbar">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">房间号:</label>
                        <div class="layui-input-inline">
                            <input name="houseId" class="layui-input" placeholder="请输入房间号"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">房东:</label>
                        <div class="layui-input-inline">
                            <input name="fangdong" class="layui-input" placeholder="请输入房东"/>
                        </div>
                    </div>
 <!--                   <div class="layui-inline">
                        <label class="layui-form-label">费用类型:</label>
                        <div class="layui-input-inline">
                            <input name="typeId" class="layui-input" placeholder="请输入费用类型"/>
                        </div>
                    </div>-->
                    <div class="layui-inline">&emsp;
                        <button class="layui-btn icon-btn" lay-filter="tableSearch" lay-submit>
                            <i class="layui-icon">&#xe615;</i>搜索
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary icon-btn">
                            <i class="layui-icon">&#xe669;</i>重置
                        </button>
                    </div>
                </div>
            </form>
            <!-- 数据表格 -->
            <table id="dataTable" lay-filter="dataTable"></table>
        </div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="tableBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" perm-show="propertyInfo:edit" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" perm-show="propertyInfo:delete" lay-event="delete">删除</a>
    {{#  if(d.status==0){   }}
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="jiaofei">缴费</a>
    {{#  }  }}
</script>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="print"> 开具发票 </button>
    </div>
</script>

<!-- js部分 -->
<script src="${ctxPath}/assets/libs/layui/layui.js"></script>
<script src="${ctxPath}/assets/js/common.js"></script>
<script>
    layui.use(['layer', 'table', 'tableX', 'notice', 'xnUtil', 'laydate', 'element'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var table = layui.table;
        var tableX = layui.tableX;
        var admin = layui.admin;
        var form = layui.form;
        var notice = layui.notice;
        var xnUtil = layui.xnUtil;
        var laydate = layui.laydate;
        var element = layui.element;

        var name = layui.data(admin.setter.tableName).loginUser.name;


        /* 渲染表格 */
        var insTb = tableX.render({
            elem: '#dataTable',
            url: getProjectUrl() + 'propertyInfo/page',
            page: true,
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cellMinWidth: 100,
            where:{fangdong:name},
            cols: [
                [
                    {type: 'checkbox'},
                    {field: 'houseId', title: '房间号', sort: true},
                    {field: 'fangdong', title: '户主', sort: true},
                    //{field: 'typeId', title: '费用类型', sort: true},
                    {field: 'startDate', title: '开始时间', sort: true},
                    {field: 'endDate', title: '结束时间', sort: true},
                    {field: 'money', title: '金额', sort: true},
                    /*{field: 'status', title: '状态', sort: true},*/
                    {field: 'status', width: 100, title: '状态', templet: function (d) {  return xnUtil.rendDataTableDict(d.status, 'jiaofei_state'); }},
                    {title: '操作', toolbar: '#tableBar', align: 'center', width: 200, minWidth: 200}
                ]
            ],
            done: function(res, curr, count) {
                xnUtil.tableDone(insTb, res, curr, count);
            }
        });

        /* 表格搜索 */
        form.on('submit(tableSearch)', function (data) {
            data.field.fangdong = name;
            insTb.reload({where: data.field, page: {curr: 1}});
            return false;
        });
        var money = layui.data(admin.setter.tableName).loginUser.email;
        var id = layui.data(admin.setter.tableName).loginUser.id;
        /* 表格工具条点击事件 */
        table.on('tool(dataTable)', function (obj) {
            /* 删除 */
            if (obj.event === 'delete') {
                layer.confirm('确定要操作该数据吗？', {
                    skin: 'layui-layer-admin',
                    shade: .1
                }, function () {
                    admin.req(getProjectUrl() + 'propertyInfo/delete', JSON.stringify([{'id': obj.data.id}]), function(res){
                        layer.msg(res.message, {icon: 1, time: 1000}, function () {
                            insTb.reload();
                        });
                    }, 'post');
                });
            }
            /* 编辑 */
            if (obj.event === 'edit') {
                showAddOrUpdateModel(obj.data);
            }

            if (obj.event === 'jiaofei') {
                layer.confirm('确定要缴费吗？ 费用'+obj.data.money+"元", {
                    skin: 'layui-layer-admin',
                    shade: .1
                }, function () {
                    console.log(Number(money)-Number(obj.data.money));
                    if (money>=Number(obj.data.money)){
                        $.ajax({
                            type: 'post',
                            url: getProjectUrl() + 'sysUser/updateInfo',
                            contentType: 'application/json',
                            data: JSON.stringify({"id": id, "email": Number(money)-Number(obj.data.money)}),
                            success: function (res) {
                                admin.req(getProjectUrl() + 'propertyInfo/yijiaofei', JSON.stringify({'id': obj.data.id}), function(res){
                                }, 'post');
                                layer.msg("缴费成功", {icon: 1, time: 1000}, function () {
                                    insTb.reload();
                                    layer.load(1);
                                    location.reload();
                                });
                            }
                        });

                    }else{
                        layer.msg("余额不足", {icon: 2, time: 1000});
                    }

                });
            }
        });

        /* 表格头工具栏点击事件 */
        table.on('toolbar(dataTable)', function (obj) {
            if (obj.event === 'add') { // 添加
                showAddOrUpdateModel();
            }
            if (obj.event === 'delete') { // 删除
                var checkRows = table.checkStatus('dataTable');
                if (checkRows.data.length === 0) {
                    notice.msg('请选择要操作的数据', {icon: 2});
                    return;
                }
                layer.confirm('确定要操作该数据吗？', {
                    skin: 'layui-layer-admin',
                    shade: .1
                }, function () {
                    var ids = checkRows.data.map(function (d) {
                        return {"id": d.id};
                    });
                    admin.req(getProjectUrl() + 'propertyInfo/delete', JSON.stringify(ids), function(res){
                        layer.msg(res.message, {icon: 1, time: 1000}, function () {
                            insTb.reload();
                        });
                    }, 'post');
                });
            }else{
                //打印收据
                var checkStatus=table.checkStatus(obj.config.id);
                var data =checkStatus.data;
                if(data.length>0){//有选中的信息
                    //判断是否来自同一个用户并且是已经缴费的状态
                    var flag=getStatus(data);
                    if(flag==true){
                        //渲染值信息并且打印
                        setValues(data);

                        print_("print_");
                    }else{
                        layer.msg("请选择同一个房间并且是已经缴费的状态");
                    }

                }else{
                    layer.msg("请选中要打印的记录信息");
                }
            }
        });


        /**
         * 判断是否来自同一个用户并且是已缴费状态
         * 如果是返回true
         * 否则返回false
         */
        function getStatus(data){
            var numbers= data[0].houseId;//
            // var status = data[0].status;
            for(var i=0;i<data.length;i++){
                console.log(data[i].houseId);
                console.log(data[i].status);
                if(data[i].houseId!=numbers || data[i].status!=1){
                    return false;
                }
            }
            return true;
        }

        //打印指定地div层
        function print_(str){
            document.body.innerHTML=document.getElementById(str).innerHTML;
            window.print();
            //强制刷新
            window.history.back();
            location.reload();
        }
        /**
         * 数据渲染
         */
        function setValues(data){
            //遍历表格
            var tb=document.getElementById("tab");
            var getmoney=0;

            var rows=tb.rows;
            for(var i=3;i<6;i++){//遍历行
                //遍历每行中的列
                //  for(var j = 0; j<rows[i].cells.length; j++ ){    // 遍历该行的 td
                //设置值信息
                for(var k=0;k<data.length;k++){
                    var n=k+3;
                    if(n==i){
                        //遍历数据
                        console.log(data[k]);
                        rows[i].cells[0].innerHTML=data[k].typeId;
                        rows[i].cells[1].innerHTML="￥";
                        rows[i].cells[2].innerHTML=data[k].money;
                        rows[i].cells[3].innerHTML="支付方式：现金";
                        getmoney+=data[k].money;
                    }
                    //设置金额
                    document.getElementById('money').innerHTML=getmoney;
                    //用户
                    var username=data[0].fangdong;
                    document.getElementById('username').innerHTML=username;
                    var bigMoeny=convertCurrency(getmoney);
                    document.getElementById('bigMoney').innerHTML=bigMoeny;
                    //渲染年月日
                    var date=new Date();
                    document.getElementById("year").innerHTML=date.getFullYear();
                    document.getElementById("month").innerHTML=date.getMonth();
                    document.getElementById("day").innerHTML=date.getDay();
                }
            }
            //获取金额


            element.init();
        }

        // 显示表单弹窗
        function showAddOrUpdateModel(data) {
            var layIndex = admin.open({
                title: (data ? '修改' : '添加') + '物业收费管理',
                url: getProjectUrl() + 'propertyInfo/form',
                area: ['800px',''],
                data: { data: data },     // 传递数据到表单页面
                end: function () {
                    var layerData = admin.getLayerData(layIndex, 'formOk');
                    if (layerData) {  // 判断表单操作成功标识
                        insTb.reload();  // 成功刷新表格
                    }
                },
                success: function (layero, dIndex) {
                    // 弹窗超出范围不出现滚动条
                    $(layero).children('.layui-layer-content').css('overflow', 'visible');
                    $(layero).find('[lay-submit]').focus();
                }
            });
        }
    });


    //钱数字转大写
    function convertCurrency(money) {
        //汉字的数字
        var cnNums = new Array('零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖');
        //基本单位
        var cnIntRadice = new Array('', '拾', '佰', '仟');
        //对应整数部分扩展单位
        var cnIntUnits = new Array('', '万', '亿', '兆');
        //对应小数部分单位
        var cnDecUnits = new Array('角', '分', '毫', '厘');
        //整数金额时后面跟的字符
        var cnInteger = '整';
        //整型完以后的单位
        var cnIntLast = '元';
        //最大处理的数字
        var maxNum = 999999999999999.9999;
        //金额整数部分
        var integerNum;
        //金额小数部分
        var decimalNum;
        //输出的中文金额字符串
        var chineseStr = '';
        //分离金额后用的数组，预定义
        var parts;
        if (money == '') { return ''; }
        money = parseFloat(money);
        if (money >= maxNum) {
            //超出最大处理数字
            return '';
        }
        if (money == 0) {
            chineseStr = cnNums[0] + cnIntLast + cnInteger;
            return chineseStr;
        }
        //转换为字符串
        money = money.toString();
        if (money.indexOf('.') == -1) {
            integerNum = money;
            decimalNum = '';
        } else {
            parts = money.split('.');
            integerNum = parts[0];
            decimalNum = parts[1].substr(0, 4);
        }
        //获取整型部分转换
        if (parseInt(integerNum, 10) > 0) {
            var zeroCount = 0;
            var IntLen = integerNum.length;
            for (var i = 0; i < IntLen; i++) {
                var n = integerNum.substr(i, 1);
                var p = IntLen - i - 1;
                var q = p / 4;
                var m = p % 4;
                if (n == '0') {
                    zeroCount++;
                } else {
                    if (zeroCount > 0) {
                        chineseStr += cnNums[0];
                    }
                    //归零
                    zeroCount = 0;
                    chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
                }
                if (m == 0 && zeroCount < 4) {
                    chineseStr += cnIntUnits[q];
                }
            }
            chineseStr += cnIntLast;
        }
        //小数部分
        if (decimalNum != '') {
            var decLen = decimalNum.length;
            for (var i = 0; i < decLen; i++) {
                var n = decimalNum.substr(i, 1);
                if (n != '0') {
                    chineseStr += cnNums[Number(n)] + cnDecUnits[i];
                }
            }
        }
        if (chineseStr == '') {
            chineseStr += cnNums[0] + cnIntLast + cnInteger;
        } else if (decimalNum == '') {
            chineseStr += cnInteger;
        }
        return chineseStr;
    }


</script>


<div class="main"   id="print_"  style="display: none;">
    <div class="body">
        <div class="title">
            <div class="div1">
                <div class="divCtn">
                    <div class="titleCtn">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;收&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;据</div>
                    <div class="titleUdeLine"></div>
                </div>
            </div>
            <div class="div2">NO：<span style="color: #9C5223;">2396827</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
        </div>
        <div class="date">
            <div class="deDiv1">
                <span id="year"></span>年&nbsp;&nbsp;
                <span id="month"></span>&nbsp;月
                <span id="day"></span>日</div>
            <div class="deDiv2">第&nbsp;&nbsp;&nbsp;&nbsp;200&nbsp;&nbsp;&nbsp;&nbsp;号</div>
        </div>
        <table  id="tab" border="1" style="width: 100%; border-collapse: collapse;">
            <tr class="tempTr2">
                <td colspan="6" style="border-right-color: #FFFFFF; width: 50%; text-align: left;">&nbsp;&nbsp;兹&nbsp;&nbsp;收&nbsp;&nbsp;到&nbsp;&nbsp; <span id="username"></span></td>
                <td colspan="6" style="width: 50%;">交&nbsp;&nbsp;来&nbsp;&nbsp;下&nbsp;&nbsp;列&nbsp;&nbsp;款&nbsp;&nbsp;项&nbsp;&nbsp;此&nbsp;&nbsp;据</td>
            </tr>
            <tr>
                <td align="center" rowspan="2" style="width: 60%;">摘&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;要</td>
                <td colspan="10" align="center" style="width: 10%;">金&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;额</td>
                <td rowspan="2" align="center" style="width: 30%;">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注</td>
            </tr>
            <tr class="tempTr1">
                <td>￥</td>
                <td>百</td>
                <td>十</td>
                <td>万</td>
                <td>千</td>
                <td>百</td>
                <td>十</td>
                <td>元</td>
                <td>角</td>
                <td>分</td>
            </tr>

            <tr class="tempTr2">
                <td><span id="content"></span></td>
                <td>￥</td>
                <td colspan="9"></td>
                <td>支付方式：现金</td>

            </tr>

            <tr class="tempTr2">
                <td></td>
                <td>￥</td>
                <td colspan="9"></td>
                <td></td>
            </tr>

            <tr class="tempTr2">
                <td></td>
                <td>￥</td>
                <td colspan="9"></td>
                <td></td>
            </tr>

            <tr class="tempTr2">
                <td></td>
                <td></td>
                <td colspan="9"></td>
                <td></td>
            </tr>

            <tr class="tempTr2">
                <td colspan="12" style=" text-align: left;">
                    合计人民币（大写）：<span id="bigMoney"></span>
                    <div style="float: right; display: flex;"><div style="font-size: 20px;">￥：</div><div  id="money" style="width: 180px; height: 30px; border-bottom: solid #000000 1px; text-align: center;"></div></div>
                </td>
            </tr>
        </table>


        <div style="width: 100%; display: flex; height: 40px;">
            <div style="width: 50%; height: 40px; line-height: 40px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
            <div style="width: 50%; height: 40px; line-height: 40px;">经手人(盖章)：</div>
        </div>
    </div>
    <!--    <div class="end"><div style="margin-top: 160px; text-align: center; height: 230px;width: 100%;">第<br/>二<br/>联<br/>：<br/>存<br/>根</div></div>-->
</div>

</body>
</html>
